<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>老师评价统计</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.2/echarts.common.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px; height: 400px"></div>
		<p>
			<a href="/">返回首页</a>
		</p>

		<script>
			var myChart = echarts.init(document.getElementById('main'))
			function fetchData() {
			        fetch('/teachers_data/',{
							method: 'post',
							headers: {
							  "Accept": "application/json",
							  'Content-Type': 'application/json'
							}
						  })
			            .then(response =>{
			                if (!response.ok){
			                    throw new Error('Network response was not ok');
			                    }
			                return response.json(); // 假设服务器返回的是JSON格式的数据
			            })
			            .then(data => {
			            	console.log("----data---",data) // 可以在浏览器的console中看到对应日志
			                var option = {
			                    color: ['#f00', '#00f'],
			                    title: {
			                        text: '老师评价统计图'
			                    },
			                    tooltip: {},
			                    legend: {
			                        data:['好评', '差评']
			                    },
			                    xAxis: {
			                        data: data.names
			                    },
			                    yAxis: {},
			                    series: [{
										name: '好评',
										type: 'bar',
										data: data.good
										},
										{
										name: '差评',
										type: 'bar',
										data: data.bad
										},
			                    ]
			                }

			                myChart.setOption(option);
			            })
			            .catch(error => {
			            	console.log("There is a error:", error)
			             });
			}

			window.onload = function() {
				// 当页面加载完成后，获取数据
				fetchData();
			}
		</script>
	</body>
</html>